<template>
    <!-- 秀场频道信息 -->
    <div class="author3-component-container">
        <router-link v-if="info.hostUser" :to="{name: 'Anchor', params: {channelid: info.hostUser.id}}"
                     class="author3-component-head">
            <img :src="info.hostUser.icon + '?x-oss-process=image/resize,w_150'"/>
        </router-link>
        <router-link v-if="info.hostUser" :to="{name: 'Anchor', params: {channelid: info.hostUser.id}}"
                     class="author3-component-info">
            <div class="author3-component-title">{{info.name}}</div>
            <div class="author3-component-data">
                {{this.simpleNum(vcount)}}在看&nbsp;&nbsp;{{info.subscriptionCount}}订阅
            </div>
        </router-link>
        <div class="clearBoth"></div>
    </div>
</template>

<script>
    export default {
        props: {
            info: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            vcount:{
                type:Number,
                default:0
            }
        },
        mounted: function () {
            // setTimeout(function() {
            //     console.log("+++++++++++++++++++++++++++");
            //     console.log(JSON.stringify(this.info, undefined, 2));
            //     console.log("+++++++++++++++++++++++++++");
            // }, 5000);
        }
    }
</script>

<style>
    .author3-component-container {
        display: block;
        width: 100%;
        /*height: 2.7rem;*/
        padding: 0.3rem 4%;
        background: -webkit-linear-gradient(rgba(0, 0, 0, 1), rgba(255, 255, 255, 0)); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(rgba(0, 0, 0, 1), rgba(255, 255, 255, 0)); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(rgba(0, 0, 0, 1), rgba(255, 255, 255, 0)); /* Firefox 3.6 - 15 */
        background: linear-gradient(rgba(0, 0, 0, 1), rgba(255, 255, 255, 0)); /* 标准的语法（必须放在最后） */
        /*opacity: 0.75;*/
        box-sizing: border-box;
    }

    .author3-component-head, .author3-component-info {
        height: 2.7rem;
        float: left;
        display: block;
        text-decoration: none;
    }

    .author3-component-head {
        width: 2.7rem;
    }

    .author3-component-head img {
        display: block;
        width: 2.7rem;
        height: 2.7rem;
        border-radius: 0.4rem;
        object-fit: cover;
    }

    .author3-component-info {
        margin-left: 0.4rem;
        font-size: 0.9rem;
    }

    .author3-component-title, .author3-component-info {
        line-height: 1.35rem;
    }

    .author3-component-info {
        color: #FFFFFF;
    }

    .author3-component-data {
    }

    .author3-component-data img {
        height: 1.0rem;
        vertical-align: middle;
    }
</style>